<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div id="fmapmain">
    <!-- <div class="abstatic-height"></div> -->
    <div class="map-mode-pannel" :class="{ 'map-pannel-show': isSelectMode }" v-loading="mapLoad">
      <el-amap
        vid="fmamap"
        ref="map"
        resizeEnable="true"
        :plugin="plugin"
        :amap-manager="amapManager"
        :center="center"
        :zooms="zooms"
        :zoom="zoom"
        :events="events"
        class="mapset"
        :viewMode="vmode"
        :pitch="vrotate"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="marker.id"
          :position="marker.position"
          :vid="index"
          :id="marker.id"
          :events="marker.events"
        >
          <div class="map-marker-wrap">
            <div
              class="main-map-marker"
              :class="{
                'main-map-marker__normaln': marker.status == '0',
                'main-map-marker__notify': marker.status == '1',
                'main-map-marker__offline': marker.status == '2'
              }"
              @click="showSensor(marker.id)"
            ></div>
            <p class="bubble" @click="showSensor(marker.id)" @touchstart="showSensor(marker.id)">
              <i class="build-name">{{ marker.label }}</i>
              <i class="arrow-up"></i>
            </p>
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!-- 列表模式 -->
    <div class="list-mode-pannel" :class="{ 'list-pannel-show': !isSelectMode }">
      <el-scrollbar style="height: 100%;">
        <mapListModel
          :loadData="!isSelectMode"
          :channelId.sync="channelId"
          @showSensor="showSensor"
        ></mapListModel>
      </el-scrollbar>
    </div>
    <div class="map-tool">
      <div class="map-tool__right" :class="{ toolspannel: isExpand }">
        <div class="map-tool-rightwrap">
          <title-warp title="设备实时状态" widthAuto style="height: 278px;overflow:hidden">
            <div class="border_message">
              <div class="border_message_num">
                <border-cont
                  :num="totalStatus.callCount"
                  :type="'报警'"
                  :color="'bottom,#FF6574,#FA4F6C,#F53563'"
                ></border-cont>
              </div>
              <div class="border_message_num">
                <border-cont
                  :num="totalStatus.faultCount"
                  :type="'故障'"
                  :color="'bottom,#F8BA67,#E69E3F,#D58824'"
                ></border-cont>
              </div>
              <div style="margin-top: 10px;" class="border_message_num">
                <border-cont
                  :num="totalStatus.normalCount"
                  :type="'正常'"
                  :color="'bottom,#63FC92,#4AFBA5,#37FFB8'"
                ></border-cont>
              </div>
            </div>
          </title-warp>

          <border-warp widthAuto style="margin-top: 20px;">
            <el-radio-group
              v-model="unhandleList"
              size="small"
              class="unhandle-list"
              @change="unhandleChange"
            >
              <el-radio-button label="fireUntreated">未处理报警</el-radio-button>
              <el-radio-button label="breakUntreated">未处理故障</el-radio-button>
            </el-radio-group>
            <div class="untreated-list" v-loading="loading">
              <div class="wrap-with-halfboder"></div>
              <div v-if="unhandleItems.length > 0" style="height:100%">
                <el-scrollbar style="height:100%">
                  <dl class="untreated-list-item" v-for="item in unhandleItems" :key="item.id">
                    <dt @click="showSensor(item.buildId)" style="cursor: pointer">
                      <i>
                        <icon-svg icon-class="building" style="fill:#2bdef5" />
                      </i>
                      {{ item.bName }}
                    </dt>
                    <dd class="untreated-pain">设备系列:{{ item.series }}</dd>
                    <dd class="untreated-pain">设备位置:{{ item.position }}</dd>
                    <dd class="untreated-pain">报警时间:{{ item.date }}</dd>
                    <dd class="untreated-handle">
                      <el-button type="text" @click="handleRows(item.id)">
                        <i style="margin-right: 5px">
                          <icon-svg icon-class="chuli" style="fill:#2bdef5" />
                        </i>处理
                      </el-button>
                    </dd>
                  </dl>
                  <div class="loadmore-btn-goto" v-if="unhandleItems.length >= 20">
                    <el-button type="text" @click="checkMore">查看更多</el-button>
                  </div>
                </el-scrollbar>
              </div>
              <div v-else>
                <p class="none-list" v-if="alarmtype == 1">暂无未处理报警</p>
                <p class="none-list" v-else>暂无未处理故障</p>
              </div>
            </div>
          </border-warp>
        </div>
        <div class="tool-wrap" :class="{ 'map-width-select': !isSelectMode }">
          <border-warp style="padding: 5px 10px">
            <div class="tool-wrap-items">
              <div
                class="map-listchange__mode"
                :class="{ 'map-mode-select': isSelectMode }"
                @click="changeMode('map')"
              >地图模式</div>
              <div
                class="map-listchange__mode"
                :class="{ 'list-mode-select': !isSelectMode }"
                @click="changeMode('list')"
              >列表模式</div>
              <div
                @click="handleCommand('showtrafic')"
                class="map-tool-item"
                v-show="isSelectMode"
              >路况</div>
              <div @click="handleCommand('showpich')" class="map-tool-item" v-show="isSelectMode">测距</div>
              <div class="map-dotshow-wrap" v-show="isSelectMode">
                <span>报警</span>
                <span>故障</span>
              </div>
              <div class="map-search" v-show="isSelectMode">
                <el-dropdown @command="selectHandle">
                  <span class="el-dropdown-link">
                    {{ droptext
                    }}
                    <i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">建筑</el-dropdown-item>
                    <el-dropdown-item command="2">地名</el-dropdown-item>
                    <el-dropdown-item command="3" v-if="issuperadmin">站点</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-autocomplete
                  v-show="localSearch == '1'"
                  class="search-select"
                  popper-class="propper-class"
                  v-model="selectBuildId"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入建筑名"
                  @select="handleSelect"
                  clearable
                ></el-autocomplete>
                <el-select
                  style="width:220px"
                  v-show="localSearch == '2'"
                  v-model="searchAddressKw"
                  filterable
                  clearable
                  remote
                  reserve-keyword
                  placeholder="请输入地址"
                  :remote-method="remoteMethod"
                  @change="selectedAddress"
                  value-key="location"
                  :loading="loading"
                >
                  <el-option
                    v-for="(item, index) in searchAddressList"
                    :key="index"
                    :label="item.name"
                    :value="item"
                  >
                    <span>{{ item.name }}</span>
                    <span style="color: #999; font-size: 12px">
                      {{
                      item.district
                      }}
                    </span>
                  </el-option>
                </el-select>
                <el-autocomplete
                  v-show="localSearch == '3'"
                  class="search-select"
                  popper-class="tenant-propper-class"
                  v-model="selectTenant"
                  :fetch-suggestions="tenantSearch"
                  placeholder="请输入关键词"
                  @select="handleSelecttenant"
                ></el-autocomplete>
              </div>
              <div class="map-tool__left">
                <div class="map-tool-sensors" :class="{ toolsexpand: isExpand }" @click="changeIt">
                  <i class="class-icon-show">
                    <icon-svg icon-class="show" style="fill:#2bdef5" />
                  </i>
                  <i class="class-icon-hide">
                    <icon-svg icon-class="hide" style="fill:#2bdef5" />
                  </i>
                  报警列表
                </div>
              </div>
            </div>
          </border-warp>
        </div>
      </div>
    </div>

    <planDialog :Show.sync="realtimePointShow" :buildId.sync="buildId" :channelId.sync="channelId"></planDialog>
    <el-dialog
      title="处理提示"
      :visible.sync="isdelalram"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="xf-jc-dialog"
      width="360px"
      height="160px"
    >
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype == 1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleSure(rowsId)">确定</el-button>
        <el-button size="mini" type="text" @click="isdelalram = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import clip from "@/utils/clipboard"; // use clipboard directly
import { mapGetters } from "vuex";
import planDialog from "./components/realtimePoints";
import mapListModel from "./components/mapListModel";
import {
  getAllStatus,
  getBuildingList,
  getUnhandleList,
  changeFireRsolve
} from "@/api/device/deviceFireMain/index";
import {
  getAllTenant,
  getTenantPos,
  getMaxAlarm
} from "@/api/datahandler/deviceAbnormal/index";

import { AMapManager } from "vue-amap";

let amapManager = new AMapManager();
let cluster;
export default {
  name: "fireMain",
  components: { planDialog, mapListModel },
  data() {
    let self = this;
    return {
      isSelectMode: true,
      droptext: "建筑",
      isdelalram: false,
      switchalramtype: "1",
      rowsId: "",
      alarmtype: "1",
      total: null,
      totalStatus: {},
      listQuery: {
        page: 1,
        limit: 20,
        alrmCategory: 1
      },
      unhandleItems: [],
      unhandleList: "fireUntreated",
      buildId: "",
      searchAddressKw: "",
      searchAddressList: [],
      queryParams: {
        channelId: ""
      },
      channelId: "",
      cCount: 1,
      realtimePointShow: false,
      markers: [],
      markerRefs: [],
      showTraffic: true,
      showhide: true,
      Trafficlay: undefined, //实时交通图层
      rulerFn: undefined, //测距工具
      ruleroff: true,
      mouseToolOjb: undefined, //鼠标测量工具
      desme: undefined, // 密度计算工具
      localSearch: "1",
      searchOption: {
        city: "武汉",
        citylimit: false
      },
      input5: "",
      isExpand: true,
      buildingList: [],
      selectBuildId: "",
      selectTenant: "",
      list: [],
      tenantlist: [],
      loading: false,
      mapLoad: true,
      states: [],
      center: [114.42377, 30.50469],
      // center: {lng: 0, lat: 0},
      zooms: [5, 19],
      lng: 0,
      lat: 0,
      zoom: 12,
      resized: true,
      vmode: "3D",
      vrotate: 55,
      amapManager,
      clusterobj: undefined,
      events: {
        init: o => {
          o.setMapStyle("amap://styles/117f36d1e643cfd46d21660d866df29e");
          // 点聚合功能
          setTimeout(() => {
            cluster = new AMap.MarkerClusterer(o, self.markerRefs, {
              gridSize: 80,
              minClusterSize: 2,
              maxZoom: 17,
              renderCluserMarker: self._renderCluserMarker
            });
            self.clusterobj = cluster;
            self.mapLoad = false;
          }, 1000);
          let _map = amapManager.getMap();
          _map.on("complete", () => {
            self.getMapCenter();
          });
        }
      },
      plugin: [
        {
          pName: "CitySearch",
          // showMarker:false,
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              // o.getCurrentPosition((status, result) => {
              //   if (result && result.position) {
              //     console.log(result);
              //     self.lng = result.position.lng;
              //     self.lat = result.position.lat;
              //     self.center = [self.lng, self.lat];
              //     self.$nextTick();
              //   }
              // });
              o.getLocalCity(function(status, result) {
                if (status === "complete" && result.info === "OK") {
                  if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    let map = amapManager.getMap();

                    map.setBounds(citybounds);
                    map.setZoom(12.2);
                  }
                }
              });
              // o.getCity(function(result){
              //     console.log(result)
              // })
            }
          }
        },
        {
          pName: "Scale",
          events: {}
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["issuperadmin"])
  },
  mounted() {
    this.fetchData();
    //页面高度
    let mapmainHeight = document
      .querySelector(".sidebar-container")
      .getBoundingClientRect().height;

    // map高度
    let mapHeight = mapmainHeight;
    document.querySelector("#fmapmain").style.height = mapHeight + "px";
    // 建筑物跟进ws触发更新
    let ele = this;
    this.bus.$on("getBuildingStatus", function(val) {
      ele.getBuildList(ele.queryParams);
    });
  },
  beforeDestroy() {
    this.bus.$off("getBuildingStatus");
  },
  methods: {
    getMapCenter() {
      getMaxAlarm(this.queryParams).then(res => {
        this.center = res.data.gis.split(",");
      });
    },
    _renderCluserMarker(context) {
      // 点聚合方法
      const count = this.markers.length;

      let factor = Math.pow(context.count / count, 1 / 18);
      let div = document.createElement("div");
      let Hue = 180 - factor * 180;
      // let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      // let fontColor = 'hsla('+Hue+',100%,20%,1)';
      // let borderColor = 'hsla('+Hue+',100%,40%,1)';
      // let shadowColor = 'hsla('+Hue+',100%,50%,1)';
      let bgColor = "hsla(153,100%,33%,0.7)";
      let fontColor = "hsla(0,0%,100%,1)";
      let borderColor = "hsla(153,100%,40%,1)";
      let shadowColor = "hsla(" + Hue + ",100%,50%,1)";
      div.style.backgroundColor = bgColor;
      let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + "px";
      div.style.border = "solid 1px " + borderColor;
      div.style.borderRadius = size / 2 + "px";
      div.style.boxShadow = "0 0 1px " + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + "px";
      div.style.color = fontColor;
      div.style.fontSize = "14px";
      div.style.textAlign = "center";
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    },
    handleCopy(text, event) {
      clip(text + "", event);
    },
    checkMore() {
      let rootPath = this.$route.matched[0];
      if (rootPath.path === "") {
        this.$router.push("/gailan/exceptionRecord");
      } else {
        // 加载更多修改
        let lastPath =
          this.queryParams.channelId !== undefined
            ? "/" + this.queryParams.channelId
            : "";
        this.$router.push(rootPath.path + "/exceptionRecord" + lastPath);
      }
    },
    initPage() {
      this.listQuery.page = 1;
      this.listQuery.limit = 20;
    },
    unhandleChange() {
      // 火警列表和故障列表切换
      this.unhandleItems = [];
      if (this.unhandleList === "fireUntreated") {
        this.initPage();
        this.listQuery.alrmCategory = 1;
        this.getUnhandleL();
        this.alarmtype = 1;
      } else {
        this.initPage();
        this.listQuery.alrmCategory = 0;
        this.getUnhandleL();
        this.alarmtype = 0;
      }
    },
    handleRows(rowId) {
      this.isdelalram = true;
      this.switchalramtype = "1";
      this.rowsId = rowId;
    },
    handleSure() {
      changeFireRsolve(
        this.$qs.stringify({ id: this.rowsId, flag: this.switchalramtype })
      )
        .then(res => {
          if (res.status === 200) {
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
            this.isdelalram = false;
            this.switchalramtype = "1";
            this.getUnhandleL();
          }
        })
        .catch(res => {
          this.$notify({
            title: "提示",
            message: "网络异常！",
            type: "warning",
            duration: 2000
          });
          this.isdelalram = false;
        });
    },
    handleCurrentChange(val) {
      //  简版翻页
      this.listQuery.page = val;
      this.getUnhandleL();
    },
    changeMode(type) {
      //this.isExpand=false;
      this.unhandleList = "fireUntreated";
      switch (type) {
        case "map":
          this.isSelectMode = true;
          this.isExpand = true;
          getAllStatus(this.queryParams).then(res => {
            this.totalStatus = res.data;
          });
          this.getUnhandleL();
          break;
        case "list":
          this.isSelectMode = false;
          this.isExpand = false;
          break;
      }
    },
    fetchData() {
      //修复高德地图加载的bug
      if (localStorage.getItem("logined")) {
        let addStorage = localStorage.getItem("logined");
        this.clearMapstore();
        localStorage.setItem("logined", addStorage);
      } else {
        this.clearMapstore();
      }
      this.channelId = this.$route.params.id;
      this.queryParams.channelId = this.$route.params.id;
      this.getBuildList(this.queryParams);
      this.isExpand = true;
      this.changeMode("map");
      if (this.issuperadmin) {
        this.getAllTenant();
      }
    },
    getBuildList(query) {
      let self = this;
      getBuildingList(query).then(res => {
        this.states = res.data;
        this.markers = res.data;
        let markers = [];
        for (let i = 0; i < this.markers.length; i++) {
          markers.push({
            position: [this.markers[i].gisx, this.markers[i].gisy],
            id: this.markers[i].id,
            label: this.markers[i].name,
            status: this.markers[i].status,
            count: this.markers[i].count,
            events: {
              init(o) {
                self.markerRefs.push(o);
              }
            }
          });
        }
        this.markers = [];
        this.markers = markers;
      });
    },
    changeIt() {
      this.isExpand = !this.isExpand;
      // 展开列表请求
      if (this.isExpand) {
        getAllStatus(this.queryParams).then(res => {
          this.totalStatus = res.data;
        });
        this.getUnhandleL();
      }
    },
    getUnhandleL() {
      // 加载未处理列表
      this.loading = true;
      getUnhandleList(Object.assign(this.listQuery, this.queryParams)).then(
        res => {
          this.loading = false;
          this.total = res.data.total;
          this.unhandleItems = res.data.rows;
        }
      );
    },
    showSensor(val) {
      this.buildId = val + "";
      this.realtimePointShow = true;
      document.querySelector(".propper-class").style.display = "none";
      document.querySelector(".tenant-propper-class").style.display = "none";
    },
    selectedAddress(item) {
      let lnglat = item.location;
      let self = this;
      if (lnglat) {
        this.center = [lnglat.lng, lnglat.lat];
      } else {
        let o = amapManager.getMap();
        o.setCity(item.name, function() {
          self.zoom = 12;
        });
      }
      // 关闭测距
      if (this.rulerFn) {
        this.rulerFn.turnOff();
      }
      this.zoom = 19;
    },
    remoteMethod(pois) {
      let self = this;
      // 选择之后的列表
      AMap.plugin(["AMap.Autocomplete"], function() {
        var autoOptions = {
          city: "" // 城市，默认全国
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(pois, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (result) {
            let results = result.tips;
            if (results) {
              self.searchAddressList = results;
            }
          }
        });
      });
    },
    selectHandle(command) {
      this.localSearch = command;
      if (command === "1") {
        this.droptext = "建筑";
      } else if (command === "2") {
        this.droptext = "地名";
      } else {
        this.droptext = "站点";
      }
    },
    handleCommand(command) {
      if (command === "showtrafic") {
        if (this.showTraffic) {
          let o = amapManager.getMap();
          let trafficLayer = new AMap.TileLayer.Traffic();
          trafficLayer.setMap(o);
          this.Trafficlay = trafficLayer;
          this.showTraffic = false;
        } else {
          // 非第一次显示路况
          if (this.showhide) {
            this.Trafficlay.hide();
            this.showhide = false;
          } else {
            this.Trafficlay.show();
            this.showhide = true;
          }
        }
      } else if (command === "showpich") {
        let self = this;
        if (this.ruleroff) {
          // 显示测距工具
          let o = amapManager.getMap();

          o.plugin(["AMap.RangingTool"], function() {
            let ruler = new AMap.RangingTool(o);

            ruler.turnOn();

            self.$nextTick();

            self.rulerFn = ruler;
            self.ruleroff = false;
          });
        } else {
          self.rulerFn.turnOff();
          self.ruleroff = true;
        }
      } else if (command === "showDensity") {
        let self = this;

        let o = amapManager.getMap();
        if (!this.desme) {
          o.plugin(["AMap.MouseTool"], function() {
            let mouseTool = new AMap.MouseTool(o);
            self.desme = mouseTool;
            //鼠标工具插件添加draw事件监听
            AMap.event.addListener(mouseTool, "draw", function callback(e) {
              var eObject = e.obj; //obj属性就是鼠标事件完成所绘制的覆盖物对象。

              var polygon = new AMap.Polygon({
                path: eObject.getPath(),
                extData: "99"
              });

              let num = 0;
              let allShowDevices = self.markers;
              for (let i = 0; i < allShowDevices.length; i++) {
                let position = allShowDevices[i].position;
                let count = allShowDevices[i].count;
                if (polygon.contains(position) == true)
                  // 目前是建筑物传感器数量
                  num += count;
              }

              let size = (polygon.getArea() / 1000000).toFixed(2);
              //let info = `面积:  ${size} 平方公里，数量为:  ${num} 栋`;
              let info;
              if (num > 0)
                info = "密度为：" + (num / size).toPrecision(4) + "个/平方公里";
              else info = "无传感器";
              setTimeout(() => {
                document
                  .querySelectorAll(".amap-marker-content>div")
                  .forEach(item => {
                    if (item.children.length < 1) {
                      if (!item.getAttribute("id")) {
                        item.setAttribute("id", "amcM-" + self.cCount++);
                        item.innerText = info;
                      }
                    }
                  });
              }, 200);
            });
            mouseTool.measureArea(); //调用鼠标工具的面积量测功能
          });
        } else {
          window.location.reload();
        }
      }
    },
    querySearch(queryString, cb) {
      if (queryString == "") {
        cb([]);
      } else {
        getBuildingList(
          Object.assign({}, this.queryParams, { bName: queryString })
        ).then(res => {
          var buildings = res.data;
          if (buildings.length == 0) {
            cb([]);
          } else {
            let buildarr = [];
            buildings.forEach(build => {
              buildarr.push({ value: build.name, id: build.id });
              cb(buildarr);
            });
          }
        });
      }
    },
    getAllTenant() {
      getAllTenant(this.queryParams).then(res => {
        var buildings = res.data.rows;
        if (buildings.length == 0) {
          this.tenantlist = [];
        } else {
          let buildarr = [];
          buildings.forEach(build => {
            buildarr.push({ value: build.name, id: build.id });
            this.tenantlist = buildarr;
          });
        }
      });
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    tenantSearch(queryString, cb) {
      var restaurants = this.tenantlist;
      if (queryString == "") {
        if (cluster) {
          cluster.setMap(null);
        }
        this.getBuildList(this.queryParams);
        this.mapcluster();
        /*this.getBuildList(this.queryParams);
          this.mapcluster();*/
        var results = restaurants.filter(this.createFilter(queryString));
        cb(results);
      } else {
        var results = restaurants.filter(this.createFilter(queryString));
        if (results.length == 0) {
          this.$message({
            message: "站点中未添加建筑",
            type: "warning"
          });
        }
        cb(results);
      }
    },
    freshCenter(pos) {
      this.center = [pos.gisx, pos.gisy];
      this.zoom = 19;
      // 关闭测距
      if (this.rulerFn) {
        this.rulerFn.turnOff();
      }
    },
    handleSelect(build) {
      let selectedBuild = this.states.find(item => {
        return item.id === build.id;
      });
      if (selectedBuild) {
        this.freshCenter(selectedBuild);
      }
    },
    mapcluster() {
      let self = this;
      let map = amapManager.getMap();
      setTimeout(function() {
        map.plugin("AMap.MarkerClusterer", function() {
          cluster = new AMap.MarkerClusterer(map, self.markerRefs, {
            gridSize: 80,
            minClusterSize: 3,
            renderCluserMarker: self._renderCluserMarker
          });
        });
        if (cluster.length > 0) cluster.setMarkers(self.markers);
      }, 0);
    },
    handleSelecttenant(val) {
      let self = this;
      self.markerRefs.length = 0;
      if (cluster) {
        cluster.setMap(null);
      }
      self.markers.length = 0;
      getTenantPos({ tenantId: val.id }).then(res => {
        let markers = res.data;
        let markarr = [];
        for (let i = 0; i < markers.length; i++) {
          self.markers.push({
            position: [markers[i].gisx, markers[i].gisy],
            id: markers[i].id,
            label: markers[i].name,
            status: markers[i].status,
            count: markers[i].count,
            events: {
              init(o) {
                self.markerRefs.push(o);
              }
            }
          });
        }
        this.mapcluster();
      });
    }
  },
  watch: {
    $route: "fetchData"
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.border_message {
      width: 433px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px;
      .border_message_num {
        width: 180px;
        height: 87px;
      }
    }
.tool-wrap-items {
  height: 21px;
  line-height: 21px;

  /deep/ .el-input__inner {
    height: 21px;
    line-height: 21px;
    border-radius: 0;
  }
}
.tool-wrap {
  top: 20px;
}
.loadmore-btn-goto {
  text-align: center;
}
.map-mode-pannel,
.list-mode-pannel,
.untreated-list {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.dropdwon-svg-icon {
  margin-right: 10px;
}
.amap-geolocation-con {
  left: auto !important;
  right: 30px;
  bottom: 107px !important;
  z-index: auto !important;
}
.amap-ui-control-zoom {
  width: 35px !important;
}
#fmapmain {
  background: #122230;
  overflow: hidden;
  position: relative;
  .map-mode-pannel {
    display: none;
    height: 100%;
    &.map-pannel-show {
      display: block;
    }
  }
  .list-mode-pannel {
    width: 100%;
    height: 100%;
    display: none;
    &.list-pannel-show {
      display: block;
    }
  }
}

.mapset {
  height: 100%;
  .amap-logo {
    display: none !important;
  }
  .amap-copyright {
    visibility: hidden !important;
  }
  .amap-ui-control-position-rb {
    background: #fff;
  }
  .map-marker-wrap {
    .bubble {
      margin-top: -75px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      .build-name {
        display: inline-block;
        white-space: nowrap;
        font-style: normal;
        color: #fff;
        padding: 5px 10px;
        background-color: #00a75b;
        border-radius: 2px;
        border: 1px solid #00a75b;
        min-width: 40px;
        font-size: 12px;
      }
      .arrow-up {
        border: 4px solid transparent;
        border-top-width: 4px;
        border-top-color: #00a75b;
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
      }
    }
    .main-map-marker {
      width: 44px;
      height: 44px;
      color: transparent;
      position: relative;
      &.main-map-marker__notify {
        background: url("../../../assets/default-images/warning.png") no-repeat;
        background-size: cover !important;
        color: #fff;
      }
      &.main-map-marker__normaln {
        background: url("../../../assets/default-images/normal.png") no-repeat;
        background-size: cover !important;
        color: #fff;
      }
      &.main-map-marker__offline {
        background: url("../../../assets/default-images/offline.png") no-repeat;
        background-size: cover !important;
        color: #fff;
      }
    }
  }
}
.map-tool {
  .map-tool__left {
    float: right;
    display: flex;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
#fmapmain {
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: rgba(0, 0, 0, 0.3) !important;
  }
  .el-radio-button .el-radio-button__inner {
    background: none !important;
  }
  .untreated-list {
    min-height: 400px;
  }
}
</style>
